<!-- 使用 type="home" 属性设置首页，其他页面不需要设置，默认为page；推荐使用json5，更强大，且允许注释 -->
<route lang="json5">
{
  style: {
    navigationStyle: 'custom',
    navigationBarTitleText: '个人信息',
    navigationBarRightButton: {
      hide: true,
    },
  },
}
</route>
<template>
  <view
    class="w-full h-full bg-white overflow-hidden box-border"
    :style="{ paddingTop: safeAreaInsets?.top + 'px' }"
  >
    <view class="w-full h-full home-container">
      <wd-navbar @click-left="handleClickLeft">
        <template #title>
          <text class="text-gray-333 font-size-36 font-500">个人信息</text>
        </template>
        <template #left>
          <wd-icon
            name="chevron-left"
            class="text-gray-333 font-size-44"
            @click="pagesBack"
          ></wd-icon>
        </template>
      </wd-navbar>
      <view class="w-full h-full p-x-28 home-content">
        <view class="hr-124 flex justify-between items-center">
          <view class="font-size-32 font-400 text-gray-666">
            <text>我的头像</text>
          </view>
          <view class="flex justify-end items-center">
            <wd-img
              width="80rpx"
              height="80rpx"
              custom-class="mg-r-16"
              @click="run()"
              round
              :src="userInfo.avatar"
            />
            <wd-icon name="chevron-right" custom-class="text-gray-999 font-size-36"></wd-icon>
          </view>
        </view>
        <view class="w-full hr-2 bg-#F5F5F5"></view>
        <view class="hr-124 flex justify-between items-center">
          <view class="font-size-32 font-400 text-gray-666">
            <text>昵称</text>
          </view>
          <view class="flex justify-end items-center">
            <text
              class="text-gray-333 font-size-36 font-500"
              @click="handleClickNickname"
              v-if="isEdit"
            >
              {{ userInfo.nickname }}
            </text>
            <wd-input
              custom-input-class="text-right font-size-36 font-500 text-gray-333"
              placeholder="请输入昵称"
              type="text"
              v-model="userInfo.nickname"
              no-border
              @blur="isEdit = false"
            />
          </view>
        </view>
        <view class="w-full hr-2 bg-#F5F5F5"></view>
        <view class="hr-124 flex justify-between items-center">
          <view class="font-size-32 font-400 text-gray-666">
            <text>绑定手机号</text>
            <text class="font-size-26">（唯一标识）</text>
          </view>
          <view class="flex justify-end items-center" @click="goBindMobile">
            <view class="text-gray-999 font-size-32 font-400 mg-r-16">
              {{ userInfo.bank_mobile }}
            </view>
            <wd-icon name="chevron-right" custom-class="text-gray-999 font-size-36"></wd-icon>
          </view>
        </view>
        <view class="w-full hr-2 bg-#F5F5F5"></view>
        <view class="hr-124 flex justify-between items-center">
          <view class="font-size-32 font-400 text-gray-666">
            <text>生日</text>
          </view>
          <view class="flex justify-end items-center">
            <!-- <view class="text-gray-999 font-size-32 font-400 mg-r-16">
              {{ userInfo.birthday ? userInfo.birthday : '请选择' }}
            </view>
            <wd-icon name="chevron-right" custom-class="text-gray-999 font-size-44"></wd-icon> -->
            <wd-datetime-picker
              v-model="datePickerDate"
              :minDate="new Date(new Date().getFullYear() - 100).getTime()"
              :maxDate="new Date().getTime()"
              placeholder="请选择日期"
              :displayFormat="displayFormat"
              type="date"
              @confirm="datePicker"
            />
          </view>
        </view>
        <view class="w-full hr-2 bg-#F5F5F5"></view>
        <view class="hr-124 flex justify-between items-center">
          <view class="font-size-32 font-400 text-gray-666">
            <text>性别</text>
          </view>
          <view class="flex justify-end items-center">
            <wd-radio-group v-model="userInfo.sex" shape="dot" inline>
              <wd-radio :value="0">男</wd-radio>
              <wd-radio :value="1">女</wd-radio>
            </wd-radio-group>
          </view>
        </view>
        <view class="w-full hr-2 bg-#F5F5F5"></view>
        <view class="hr-112 p-x-32 box-border mg-t-146" @click="handleSubmit">
          <wd-button custom-class="h-full" plain block>保存</wd-button>
        </view>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { editUser, getUserInfo } from '@/service/my/my'

defineOptions({
  name: 'UserInfo',
})
const { data, run } = useUpload()
const { safeAreaInsets } = uni.getSystemInfoSync()
const handleClickLeft = () => {}
const pagesBack = () => {
  uni.switchTab({
    url: '/pages/home/person',
  })
}
onLoad(() => {})
watch(
  () => data.value,
  (newVal) => {
    if (newVal) {
      const res: any = JSON.parse(newVal)
      userInfo.value.avatar = res.data[0]
    }
  },
)
// const changeUserInfo = (type: any, value: string) => {
//   const data: any = {
//     type,
//     value,
//   }
//   editUser(data).then((res: any) => {
//     uni.showToast({
//       title: '修改成功',
//       icon: 'none',
//       duration: 1000,
//     })
//   })
// }
onShow(() => {
  getData()
})
const userInfo: any = ref({
  avatar: '',
  nickname: '',
  sex: 0,
  birthday: null,
  bank_mobile: null,
})
const saveUserInfo: any = [
  {
    key: 'avatar',
    oldValue: '',
    type: 1,
  },
  {
    key: 'nickname',
    oldValue: '',
    type: 2,
  },
  {
    key: 'sex',
    oldValue: 0,
    type: 5,
  },
  {
    key: 'birthday',
    oldValue: null,
    type: 4,
  },
  {
    key: 'bank_mobile',
    oldValue: null,
    type: 3,
  },
]
const getData = () => {
  getUserInfo().then((res: any) => {
    const userData: any = res.data
    const user: any = userData.user
    console.log(res)
    if (user) {
      saveUserInfo[0].oldValue = user.avatar
      saveUserInfo[1].oldValue = user.nickname
      saveUserInfo[2].oldValue = user.sex
      saveUserInfo[3].oldValue = user.birthday
      datePickerDate.value = user.birthday
        ? new Date(user.birthday).getTime()
        : new Date().getTime()
      saveUserInfo[4].oldValue = user.bank_mobile
      userInfo.value.avatar = user.avatar
      userInfo.value.nickname = user.nickname
      userInfo.value.sex = user.sex
      userInfo.value.birthday = user.birthday
      userInfo.value.bank_mobile = user.bank_mobile
    }
  })
}
const isEdit: any = ref(false)
const handleClickNickname = () => {
  isEdit.value = true
}
const handleSubmit = () => {
  for (let i = 0; i < saveUserInfo.length; i++) {
    const item = saveUserInfo[i]
    if (item.oldValue !== userInfo.value[item.key]) {
      const data: any = {
        type: item.type,
        value: userInfo.value[item.key],
      }
      editUser(data).then((res: any) => {
        uni.showToast({
          title: '修改成功',
          icon: 'none',
          duration: 1000,
        })
      })
    }
  }
}
const displayFormat = (items: any) => {
  return `${items[0].label}-${items[1].label}-${items[2].label}`
}
const datePickerDate: any = ref()
const datePicker = (ev: any) => {
  const date: any = new Date(ev.value)
  const dateString = `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`
  userInfo.value.birthday = dateString
}
const goBindMobile = () => {
  uni.navigateTo({
    url: '/pages/person/mobile',
  })
}
</script>

<style scoped lang="scss">
.home-container {
  position: relative;
  z-index: 1;
}
.home-content {
  height: calc(100% - var(--wot-navbar-height, 88rpx));
  overflow: auto;
}
::v-deep .wd-button {
  height: 100% !important;
}
::v-deep .wd-picker__cell {
  padding: 0 !important;
  font-size: 36rpx !important;
  color: #999 !important;
}
::v-deep .wd-picker__value {
  font-size: 36rpx !important;
  color: #999 !important;
}
</style>
